const path = require ('path');
module.exports={
    // 入口文件
    entry:{
        // 可以有多个入口，也可以只有一个，如果一个，就默认从这一个入口开始分析
        'main':'./main.js'
    },
    // 输出
    output:{
        // path可以指定输出的目录   path.resolve('./dist')   API:相对路径转绝对路径
        path:path.resolve('./'),
        // filename:'./build.js'
        filename:'build.js'
    },
    // 声明模块
    // 包含着各个Loader
    // 由于 webpack打包不认识 .css文件   所以要引入外部的loader 来加载css   npm i css-loader -S
    // npm i style-loader -S css-loader 只是在JS文件里加载了CSS  但是不能让页面产生效果  还需引用style-loader

    //++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++++
    /**
     * npm i url-loader file-loader -S
     * 
     * 
     * 
     */
    module:{
        loaders:[
            {test:/\.css$/,loader:"style-loader!css-loader"}, //所有CSS后缀的用   css-loader来加载
            {test:/\.less$/,loader:"style-loader!css-loader!less-loader"}, //npm i less less-loader -S
            {test:/\.(jpg|png|gif|svg)$/,loader:"url-loader?limit=9275"}   //如果图片小于9275字节  那么会生成base64 如果大于会重新生成一个图片  ?limit 为参数
        ]
    },
    watch:true,     //监视文件发生改动，自动产出build.js
    /**
     * 热更新：npm i webpack-dev-server -S
     * 在package.json里  webpack  改为webpack-dev-server
     * --open 自动打开浏览器
     * --hot  热替换，在不刷新的情况下替换,CSS样式
     * --inline  自动端口
     * --prot  9999  指定端口
     */
};